<template>
	<view>
		<view class="zhezao" v-if="_showgoods"></view>
			<view :class="_showgoods?`cart_bg`:``">
				<view class="cart-goods flex-column" v-if="_showgoods">
					<view class="flex-row flex-content-between cart-goods-header">
						<view class="flex-row top24 flex-item-center">
							<image class="cart-goods-img1 left30" v-if="_allcart"
								src="@/uni_modules/mu-shopping-cart/img/ok.png" mode="scaleToFill"></image>
							<image class="cart-goods-img1 left30" v-if="_allcart==false"
								src="@/uni_modules/mu-shopping-cart/img/not.png" mode="scaleToFill"></image>
							<view class="cart-goods-txt1">全选</view>
						</view>
						<view class="flex-row top24 flex-item-center">
							<image src="@/uni_modules/mu-shopping-cart/img/shanchu.png" mode="scaleToFill"
								class="cart-goods-img2"></image>
							<view class="cart-goods-txt1 right30">清空</view>
						</view>
					</view>
					<scroll-view scroll-y="true" class="cart-goods-scroll">
						<view class="cart-goods-scroll-centos flex-column">
							<view class="cart-goods-scroll-ones flex-row flex-content-between" v-for="itesm in _goodscart">
								<view class="flex-row">
									<image class="cart-goods-scroll-img1" v-if="itesm.selected"
										src="@/uni_modules/mu-shopping-cart/img/ok.png" mode="scaleToFill"></image>
									<image class="cart-goods-scroll-img1" v-if="!itesm.selected"
										src="@/uni_modules/mu-shopping-cart/img/not.png" mode="scaleToFill"></image>
									<image class="cart-goods-scroll-img2" src="@/uni_modules/mu-shopping-cart/img/lzj.png"
										mode="widthFix"></image>
									<view class="flex-column cart-goods-scroll-text">
										<view class="cart-goods-scroll-text1">辣子鸡</view>
										<view class="cart-goods-scroll-text2">￥49.28</view>
									</view>
								</view>
								<view class="flex-row cart-goods-addel-one">
									<view class="cart-goods-addel flex-row">
										<image class="cart-goods-addel-img1"
											src="@/uni_modules/mu-shopping-cart/img/jian.png" mode="scaleToFill"></image>
										<view class="cart-goods-addel-text2">1</view>
										<image class="cart-goods-addel-img2"
											src="@/uni_modules/mu-shopping-cart/img/jia.png" mode="scaleToFill"></image>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="cart flex-row flex-content-between">
					<view class="flex-row flex-content-start" @tap="showGoods">
						<image class="cart-img" src="@/uni_modules/mu-shopping-cart/img/cartimg.png" mode="scaleToFill">
						</image>
						<uni-badge text="1" class="cart-badg"></uni-badge>
						<view class="cart-price">￥137.56</view>
					</view>
					<view class="cart-js" @tap="_settlement">去结算</view>
				</view>
				<!-- <view class="tangzhe"></view> -->
			</view>
	</view>
</template>
<script>
	import {
		computed
	} from "vue"
	export default {
		data() {
			return {
				_showgoods: this.show_goods,//重新赋值查看列表,
				_allcart:this.all_cart,//重新赋值全选
				_goodscart:this.goods_cart,//重新赋值购物车列表
			}
		},
		props: {
			show_goods: { //查看列表
				type: Boolean,
				default: false,
			},
			all_cart: { //全选
				type: Boolean,
				default: false,
			},
			goods_cart: { //购物车列表
				type: Array,
				default: []
			},
			settlement:{
				type:Function,
				default:null
			}
		},
		created() {

		},
		methods: {
			//点击查看列表
			showGoods() {
				this._showgoods = !this._showgoods
			},
			_settlement(){
				// console.log(this.settlement);
				if(this.settlement){
					this.settlement();
				}
			}
		}

	}
</script>
<style lang="scss">
	.zhezao{
		width: 100%;
		height: calc(100vh - 658rpx);
		background-color: rgba(0, 0, 0, 0.5);
	}
	.tangzhe{
		width: 100%;
		height: 100rpx;
	}
	.cart-goods-addel-one {
		margin-top: 68rpx;
	}

	.cart-goods-addel {
		margin-right: 30rpx;
	}

	.cart-goods-addel-img1 {
		width: 40rpx;
		height: 40rpx;
		margin-right: 24rpx;
	}

	.cart-goods-addel-img2 {
		width: 40rpx;
		height: 40rpx;
		margin-left: 24rpx;
	}

	.cart-goods-scroll {
		width: 100%;
		height: 570rpx;
	}

	.cart-goods-scroll-centos {
		margin-top: 38rpx;
	}

	.cart-goods-scroll-ones {
		width: 100%;
		height: 108rpx;
		padding-left: 30rpx;
		margin-bottom: 60rpx;
	}

	.cart-goods-scroll-img1 {
		width: 42rpx;
		height: 42rpx;
	}

	.cart-goods-scroll-img2 {
		width: 108rpx;
		margin-left: 30rpx;
	}

	.cart-goods-scroll-text {
		margin-left: 20rpx;
	}

	.cart-goods-scroll-text1 {
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.cart-goods-scroll-text2 {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: $default-button-color;
		margin-top: 24rpx;
	}

	.cart-goods {
		width: 100%;
		height: 658rpx;
	}

	.cart-goods-img1 {
		width: 42rpx;
		height: 42rpx;
	}

	.cart-goods-img2 {
		width: 29rpx;
		height: 29rpx;
		// margin-right: 10rpx;
	}

	.cart-goods-txt1 {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-left: 22rpx;
	}

	.cart-goods-header {
		width: 750rpx;
		height: 88rpx;
		background: #F4F4F4;
		border-radius: 0rpx 0rpx 0px 0px;
		opacity: 1;
		padding-bottom: 22rpx;
	}

	.sp-scroll-goods-not-cart-txt {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		background-color: $default-button-color;
		color: #FFFFFF;
		text-align: center;
		line-height: 40rpx;
		margin-bottom: 8rpx;
		margin-right: 30rpx;
	}

	.cart {
		margin-left: 30rpx;
		width: 690rpx;
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 12rpx 12rpx rgba(0, 0, 0, 0.1);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		opacity: 1;
	}

	.cart_bg {
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 32rpx 32rpx 0px 0px;
	}

	.cart-img {
		width: 68rpx;
		height: 50rpx;
		margin-left: 40rpx;
		margin-top: 24rpx;
	}

	.cart-price {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: $default-button-color;
		margin-top: 28rpx;
		margin-left: 30rpx;
	}

	.cart-badg {
		margin-left: -30rpx;
	}

	.cart-js {
		width: 188rpx;
		height: 100rpx;
		background: $default-button-color;
		border-radius: 0px 50rpx 50rpx 0px;
		opacity: 1;
		color: #FFFFFF;
		text-align: center;
		line-height: 100rpx;
	}
</style>